<template>
  <div class="app-container">
    <list-page-container>
      <template slot="query">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="文件名称" prop="docName">
            <el-input
              v-model="queryParams.docName"
              placeholder="请输入文件名称"
              clearable
            />
          </el-form-item>
          <el-form-item label="文档标题" prop="noticeTitle">
            <el-input
              v-model="queryParams.noticeTitle"
              placeholder="请输入文档标题"
              clearable
            />
          </el-form-item>
          <el-button type="text" class="button" @click="handleQuery"
            >查询</el-button
          >
        </el-form>
      </template>

      <template slot="handel">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="importData"
        >
          新增文档
        </el-button>
      </template>

      <template slot="table"
        ><el-row gutter="20">
          <el-col :span="6" v-for="(o, index) in tableData" :key="o">
            <el-card :body-style="{ padding: '0px' }">
              <img src="" class="image" />
              <div style="padding: 14px">
                <span>{{ o.docName }}</span>
                <div class="bottom clearfix right">
                  <!-- <time class="time">{{ currentDate }}</time> -->
                  <el-button
                    type="text"
                    class="button"
                    @click="exportChitData(o)"
                    >下载</el-button
                  >
                  <el-button type="text" class="button" @click="deleteData(o)"
                    >删除</el-button
                  >
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </template>

      <template slot="pageDisplay">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="tableQueryParams.pageNum"
          :limit.sync="tableQueryParams.pageSize"
          @pagination="getList"
        />
      </template>
    </list-page-container>

    <upload-data
      :upload-file-type="uploadFileType"
      :title="uploadFileTitle"
      :hint-file-name="uploadHintFileName"
      ref="uploadData"
    ></upload-data>
  </div>
</template>

<script>
import { listPageMixins } from "@/mixins/listPageMixins";
import { FILE_TYPE, HIDDEN_DANGER_WIDTH } from "@/constantData";
import { isArr } from "@/utils/arrayUtil";
import ShowFileList from "@/components/ShowFileList/index.vue";
import guid from "@/utils/guid";
import {
  saveDoc, // 新增
  getDocListApi, // 获取列表
  deleteDocApi, // 删除
} from "@/api/baseData";
import UploadData from "@/components/UploadData/index.vue";
import { exportFile } from "@/utils/exportFile";
import { listDept } from "@/api/system/dept";
import { getAreaData } from "@/utils/getAreaData";
import { UploadFileObj } from "@/utils/uploadFile";

export default {
  dicts: [
    "enum_order_type",
    "enum_order_detail_state",
    "enum_order_gis_state",
    "enum_order_gis_upload_state",
  ],
  mixins: [listPageMixins],
  components: {
    ShowFileList,
    UploadData,
  },
  data() {
    return {
      stateColumnWidth: 80,
      HIDDEN_DANGER_WIDTH,
      fileId: `f${guid()}`,
      // 查询参数
      queryParams: {
        // 文件名
        docName: "",
        // 文档标题
        noticeTitle: "",
      },
      otherQueryParam: {},
      total: 0,
      tableData: [],
    };
  },
  computed: {
    gisFile() {
      let res = this.$store.state.temporaryFile.temporaryFileList;
      return isArr(res) && res.some((item) => item.uid == this.fileId)
        ? res.find((item) => item.uid == this.fileId).fileList
        : [];
    },
  },
  watch: {
    gisFile(val) {
      let fileIds = isArr(val) ? val.map((file) => file.fileId) : [];
      let fileId = isArr(fileIds) ? fileIds[0] : "";
      if (fileId != null && fileId !== "") {
        this.$store.commit("temporaryFile/REMOVE_ALL_FILE", this.fileId);
        this.uploadGisData(fileId);
      }
    },
  },
  methods: {
    // 新增文档
    importData() {
      let { fileId: uid } = this;
      let uploadObj = UploadFileObj.getInstance();
      uploadObj.uploadFile("temporaryFile/addDoc", { uid });
    },
    uploadGisData(fileId) {
      //   let {chitId: orderId} = this
      let owner = this;
      owner.startLoading("正在加载....");
      saveDoc({ fileId })
        .then(async (res) => {
          owner.$modal.msgSuccess("新增成功");
          this.initAreaData();
          // owner.chitInfo = await owner.getChitInfo(orderId)
        })
        .catch((e) => {})
        .finally(() => {
          owner.endLoading();
        });
    },
    exportChitData(row) {
      let path = row?.fileVo?.fileUrl;
      let { queryParams } = this;
      if (path == null || path === "") {
        this.$message.error("未传入下载路径");
        return;
      }
      const a = document.createElement("a");
      a.href = "http://39.104.66.177:73/fileDown/" + path;
      a.download = row?.fileVo?.fileName;
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      URL.revokeObjectURL(a.href);
      document.body.removeChild(a);
      //   exportFile({
      //     path: "/fileDown" + path,
      //     method: "get",
      //   }).then((res) => {
      //     this.$message.success("导出成功");
      //   });
    },
    async initAreaData() {
      let res = await getDocListApi(this.queryParams);
      if (res && res.code === 200) {
        this.tableData = res.rows;
        this.total = res.total;
      }
      this.areaData = threeData;
    },
    handleQuery() {
      this.initAreaData();
    },
    deleteData(row) {
      this.$modal
        .confirm(`是否确认删除文档名称为"${row.docName}"的数据项?`)
        .then(() => {
          deleteDocApi({ id: row.id }).then((res) => {
            this.$modal.msgSuccess("删除成功");
            this.initAreaData();
          });
        })
        .catch(() => {});
    },
  },
  created() {
    this.initAreaData();
  },
};
</script>

<style scoped></style>
